<template>
  <div class="container">
    <nav-bar title="老年人区域分布与养老方式划分情况"></nav-bar>
    <div class="chart-box chart1">
      <div class="chart-box-header">
        <pub-area
          :maxSelectLevel="5"
          @change="changeArea"
          customRightIcon
          label=""
          :isLink="false"
          valueIsLast
          ></pub-area>
        <div class="area-detail" @click="goDetailArea">
          区域分布情况
        </div>
      </div>
      <div class="chart-box-content">
        <div class="title">老年人口统计</div>
        <div class="bottom-box">
          <div class="left-box">
            <img src="./img/lnrktj.png" alt="">
            <div class="text">
              <div class="label">老年人口总数（人）</div>
              <div class="value">
                <!-- {{ state.detail.elder.total }} -->
                <count-to
                :startVal="0"
                :endVal="Number(state.detail.elder.total)"
                :decimals="0"
                :duration="2000"
              ></count-to>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="nan">
              <div class="box-rate">
                <div class="box-bgc" :style="{height: state.detail.elder.maleNumRate}">
                  <div class="rate">
                    <!-- {{ state.detail.elder.maleNumRate }} -->
                    <count-to
                      :startVal="0"
                      :endVal="Number(state.detail.elder.maleNum)"
                      :decimals="0"
                      :duration="2000"
                    ></count-to>
                  </div>
                </div>
                <div class="box-bottom"></div>
              </div>
              <div class="sex">男</div>
            </div>
            <div class="nv">
              <div class="box-rate">
                <div class="box-bgc" :style="{height: state.detail.elder.femaleNumRate}">
                  <div class="rate">
                    <!-- {{ state.detail.elder.femaleNumRate }} -->
                    <count-to
                      :startVal="0"
                      :endVal="Number(state.detail.elder.femaleNum)"
                      :decimals="0"
                      :duration="2000"
                    ></count-to>
                  </div>
                </div>
                <div class="box-bottom"></div>
              </div>
              <div class="sex">女</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="chart-box chart2">
      <div class="chart-box-header">
        农村留守老年人口统计
      </div>
      <div class="chart-box-content">
        <div class="title">
          <div class="left">农村留守老年人口数（人）</div>
          <div class="right">
            <!-- {{ state.detail.elderStayAge.total }} -->
            <count-to
              :startVal="0"
              :endVal="Number(state.detail.elderStayAge.total)"
              :decimals="0"
              :duration="2000"
            ></count-to>
          </div>
        </div>
        <div class="bottom-box">
          <van-tabs v-model:active="active" type="card" @change="changeTab">
            <van-tab title="年龄分析">
              <div class="age" id="age"></div>
            </van-tab>
            <van-tab title="健康分析">
              <div class="health">
                <div class="left">
                  <div class="health-item">
                    <div class="label">健康留守老年人</div>
                    <div class="value">
                      <!-- {{ state.detail.elderStayHealth.num1 }} -->
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.elderStayHealth.num1)"
                        :decimals="0"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="no-health-item">
                    <div class="label">非健康留守老年人</div>
                    <div class="value">
                      <!-- {{ state.detail.elderStayHealth.num2 }} -->
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.elderStayHealth.num2)"
                        :decimals="0"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="item">
                    <div class="label">残疾</div>
                    <div class="value">
                      <!-- {{ state.detail.elderStayHealth.num3 }} -->
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.elderStayHealth.num3)"
                        :decimals="0"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">患重特大疾病</div>
                    <div class="value">
                      <!-- {{ state.detail.elderStayHealth.num4 }} -->
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.elderStayHealth.num4)"
                        :decimals="0"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">老年慢性病</div>
                    <div class="value">
                      <!-- {{ state.detail.elderStayHealth.num5 }} -->
                      <count-to
                        :startVal="0"
                        :endVal="Number(state.detail.elderStayHealth.num5)"
                        :decimals="0"
                        :duration="2000"
                      ></count-to>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="巡访分析">
              <div class="tour-analysis">近6月巡访趋势</div>
              <div class="tour" id="tour"></div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <div class="chart-box chart3">
      <div class="chart-box-header">
        残疾老年人口统计
      </div>
      <div class="chart-box-content">
        <div class="title">
          <div class="left">残疾老年人口数（人）</div>
          <div class="right">
            <!-- {{ state.detail.elderDisability.total }} -->
            <count-to
              :startVal="0"
              :endVal="Number(state.detail.elderDisability.total)"
              :decimals="0"
              :duration="2000"
            ></count-to>
          </div>
        </div>
        <div class="bottom-box">
          <div class="cripple" id="cripple"></div>
        </div>
      </div>
    </div>
    <div class="chart-box chart4">
      <div class="chart-box-header">
        老年人补贴金额统计
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="left">
            <img src="./img/btje.png" alt="">
            <div class="text">
              <div class="label">老年人补贴金额（万元）</div>
              <div class="value">
                <!-- {{ state.detail.elderSubsidy.num }} -->
                <count-to
                  :startVal="0"
                  :endVal="Number(state.detail.elderSubsidy.num)"
                  :decimals="2"
                  :duration="2000"
                ></count-to>
              </div>
            </div>
          </div>
          <van-button round type="primary" class="right" @click="goSubsidy">查看</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { ref, reactive, onBeforeMount,onMounted,nextTick,onBeforeUnmount } from 'vue'
import { get_elder_analysis } from '@/api/elderDistribution'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'
import { useRouter } from 'vue-router'
const active = ref(0);
const router = useRouter()
const state = reactive({
  searchParams: {
    areaCode:useUserStore().userLastArea
  },
  detail: {
    elder: {},
    elderStayAge: {},
    elderStayHealth: {},
    elderStayPatrol: [],
    elderDisability: {},
    elderSubsidy:{}
  },
  myChart1:null,
  myChart2:null,
  myChart3:null,
})

const getElderDetail = async () => {
  let res = await get_elder_analysis(state.searchParams)
  if (res.succeed) {
    const total = res.data?.elder.maleNum + res.data?.elder.femaleNum
    res.data.elder.maleNumRate = res.data?.elder?.maleNum > 0 && total > 0 ? (res.data?.elder?.maleNum / total * 100).toFixed(2) + '%' : '0%'
    res.data.elder.femaleNumRate = res.data?.elder?.femaleNum > 0 && total > 0 ? (res.data?.elder?.femaleNum / total * 100).toFixed(2) + '%' : '0%'
    state.detail = res.data
    nextTick(() => {
      initChartAge()
      initChartCripple()
    })
  }
}

const changeArea = val => {
  state.searchParams.areaCode = val
  getElderDetail()
}

// 年龄分析
const  initChartAge = async () => {
  state.myChart1 = echarts.init(document.getElementById('age'))
  const data = [
          { value: state.detail.elderStayAge.num1, name: '60-69岁' },
          { value: state.detail.elderStayAge.num2, name: '70-79岁' },
          { value: state.detail.elderStayAge.num3, name: '80-89岁' },
          { value: state.detail.elderStayAge.num4, name: '90-99岁' },
          { value: state.detail.elderStayAge.num5, name: '100岁及以上' }

        ]
  const option = {
    title: [{
        // text: state.detail.elderStayAge.total,
        // top: '50%',
        // left: '40%',
        // padding:[-15,0,0,-15],
        // textStyle: {
        //     color: '#333',
        //     fontSize: 36,
        //     fontWeight: '400',
        // },
    }],
    legend: {
      top: 'middle',
      right: '0%',
      orient  : 'vertical'
    },
    toolbox: {
      show: false,
    },

      tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人',
      backgroundColor: 'rgba(47,37,198,0.75)',
      borderColor :'#2880FF',
        borderWidth: 1,
        textStyle:{
          color  :'#fff'
        }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['40%','80%'],
        center: ['40%', '50%'],
        roseType: 'area',
        label: {
          show: false,
          formatter: '{b}:{c}',
        },
        labelLine: {
            normal: {
                length: 2, //第一条线
                length: 5, //第二条线
                lineStyle: {
                    width: 1, // 线条的宽度
                }
            }
        },
        selectedOffset :30,
        selectedMode: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        data: data
      }
    ]
  };

  state.myChart1.setOption(option)
}

// 巡访分析
const  initChartTour = async ()=> {
  state.myChart2 = echarts.init(document.getElementById('tour'))
  const xData = []
  const lineData = []

  state.detail.elderStayPatrol.forEach(item => {
    xData.push(item.code)
    lineData.push(item.num)
  })
  const option = {
    color: ['#2675FF'],
    // color: ['#2CD09B', '#2675FF'],
    tooltip: {
      trigger: 'axis',
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)', // 背景颜色
      textStyle: {
        color: '#fff' // 字体颜色
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      top: '24%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 坐标轴两端不留空
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            color: '#D9D9D9'
          }
        },
        axisLabel: {
          show: true,
          // formatter: '{value}月',
          textStyle: {
            padding: [2, 0, 0, 0],
            color: '#333'
          }
        },
        axisTick: {
          show: false // 隐藏X轴刻度
        },
        axisPointer: {
          type: 'shadow'
        },
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 1,
        axisLabel: {
          textStyle: {
            color: '#666'
          },
          margin: 20
        },
        // name的样式设计
        splitLine: {
          lineStyle: {
            type: 'solid', // 设置网格线类型 dotted：虚线 solid:实线
            color: '#E9E9E9'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'line',
        // yAxisIndex: 1,
        symbol: 'none',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(182, 209, 255)'
            },
            {
              offset: 1,
              color: 'rgb(250, 252, 255)'
            }
          ])
        },
        smooth: true,
        data: lineData
      }
    ]
  }

  state.myChart2.setOption(option)
}

// 残疾人数分析
const initChartCripple = async () => {
  // const res = await API.getEmployeeRecord()
  // console.log(res)
  state.myChart3 = echarts.init(document.getElementById('cripple'))
  const xData = ['一级', '二级', '三级', '四级']
  const barData = [
    state.detail.elderDisability.num1,
    state.detail.elderDisability.num2,
    state.detail.elderDisability.num3,
    state.detail.elderDisability.num4,
  ]
  // const lineData = []

  // res.data.forEach(item => {
  //   xData.push(item.areaName)
  //   barData.push(item.averageTotal)
  //   lineData.push(item.cnt)
  // })
  const option = {
    color: ['#2675FF'],
    tooltip: {
      trigger: 'axis',
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)', // 背景颜色
      textStyle: {
        color: '#fff' // 字体颜色
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '24%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 坐标轴两端不留空
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            color: '#D9D9D9'
          }
        },
        axisLabel: {
          show: true,
          // formatter: '{value}月',
          textStyle: {
            padding: [2, 0, 0, 0],
            color: '#333'
          }
        },
        axisTick: {
          show: false // 隐藏X轴刻度
        },
        axisPointer: {
          type: 'shadow'
        },
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 1,
        axisLabel: {
          textStyle: {
            color: '#666'
          },
          margin: 20
        },
        // name的样式设计
        splitLine: {
          lineStyle: {
            type: 'solid', // 设置网格线类型 dotted：虚线 solid:实线
            color: '#E9E9E9'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'bar',
        stack: true, // 堆叠柱状图
        barWidth: 14, // 柱状图宽度
        itemStyle: {
          barBorderRadius: [10, 10, 10, 10]
        },

        data: barData
      }
    ]
  }

  state.myChart3.setOption(option)
}

const goSubsidy = () => {
  router.push('/subsidy')
}
const goDetailArea = () => {
  router.push('/elderDistributionArea')
}

const changeTab = val => {
  console.log('val', val);
  if (val === 1) {
    initChartAge()
  }
  if (val === 2) {
    nextTick(() => {
      initChartTour()
    })
  }
}

onBeforeUnmount(() => {
  state.myChart1 && state.myChart1.dispose()
  state.myChart2 && state.myChart2.dispose()
  state.myChart3 && state.myChart3.dispose()
})

onMounted(() => {
  getElderDetail()
})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;

  .chart-box {
    // width: calc(100% - 80px);
    width: 100%;
    font-size: 30px;
    font-family: Microsoft YaHei;
    color: #000000;
    margin-top: 20px;
    background-color: #fff;

    .chart-box-header {
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #E6E6E6;
    }
  }

  .chart1 {
    height: 440px;
    .chart-box-header {
      justify-content: space-between;
      :deep(.van-cell) {
          width: 220px;
          height: 100%;
        }
      .area-detail {
        padding-right: 40px;
        font-weight: 400;
        color: #4375E4;
      }
    }

    .chart-box-content {
      .title {
        font-weight: bold;
        color: #000000;
        margin-top: 30px;
        margin-left: 40px;
        height: 30px;
        line-height: 30px;
      }

      .bottom-box {
        height: 290px;
        width: 100%;
        display: flex;
        padding: 0 40px;

        .left-box {
          display: flex;
          align-items: center;
          img {
            width: 97px;
            height: 97px;
            margin-right: 45px;
          }

          .text {
            font-family: PingFang SC;
            color: #333333;
            .label {
              font-size: 24px;
              margin-bottom: 30px;
            }

            .value {
              font-size: 36px;
            }
          }
        }

        .right-box {
          flex: 1;
          display: flex;
          justify-content: space-evenly;
          padding: 20px 0 40px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000033;

          .nan,.nv {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            width: 60px;

            .box-rate {
              height: 178px;
              margin-bottom: 6px;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              .box-bgc {
                width: 100%;
                background-color: #d2e3ff;
                position: relative;

                .rate {
                position: absolute;
                left: 50%;
                top: -34px;
                transform: translateX(-50%);
              }
              }

              .box-bottom {
                width: 100%;
                height: 4px;
                background: #1F71FF;
              }
            }

            .sex {
              line-height: 24px;
            }
          }

          .nv {
            .box-rate {
              .box-bgc {
                background-color: #ffebd2;
              }

              .box-bottom {
                background: #FF9A1F;
              }
            }
          }
        }
      }
    }
  }

  .chart2 {
    height: 660px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .title {
        color: #333333;
        margin: 30px 40px 40px;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;

        .left {
          font-size: 24px;
        }
        .right{
          font-size: 36px;
        }
      }

      .bottom-box {
        :deep(.van-tabs) {
          height: 470px;
          padding: 0 40px;
        }

        :deep(.van-tabs__wrap) {
          border-radius: 5px;
          margin: 0 0 40px;
        }
        :deep(.van-tabs__nav--card) {
          width: 506px;
          height: 60px;
          background: #E8F2FE;
          border-radius: 5px;
          margin: 0 auto;
        }

        :deep(.van-tab){
          width: 170px;
          padding: 0;

          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #000000;
          }
        }

        :deep(.van-tab--active){
          background: #4375E4;
          .van-tab__text--ellipsis {
            font-size: 24px;
            color: #FFFFFF;
            font-weight: normal;
          }
        }

        :deep(.van-tabs__content){
          .age {
            width: 100%;
            height: 370px;
          }
        }

        .health {
          height: 370px;
          display: flex;

          .left {
            width: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .health-item,.no-health-item {
              width: 100%;
              height: 126px;
              font-size: 24px;
              font-family: PingFang SC;
              color: #3852A9;
              background-image: url(./img/health.png);
              background-size: 100% 126px;
              background-repeat: no-repeat;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              padding-left: 20px;

              .value {
                font-size: 40px;
                font-family: Adobe Heiti Std;
              }
            }

            .no-health-item {
              color: #219421;
              background-image: url(./img/no-health.png);
            }
          }

          .right {
            flex: 1;
            padding:35px 0 35px 50px;
            display: flex;
            flex-direction: column;

            .item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              height: 100px;
              border-bottom: 1px dashed #959595;
              position: relative;
              text-indent: 1em;
            }

            .item::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 0px;
              transform: translateY(-50%);
              width: 10px;
              height: 10px;
              background: #4375E4;
              border-radius: 50%;
            }

            .item:nth-child(3){
              border-bottom: none;
            }
          }
        }

        .tour-analysis {
          float: right;
          font-size: 24px;
          font-family: PingFang SC;
          color: #333333;
        }

        .tour {
          height: 370px;
          width: 100%;
        }
      }
  }

  .chart3 {
    height: 560px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

    .title {
        color: #333333;
        margin: 30px 40px 40px;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;

        .left {
          font-size: 24px;
        }
        .right{
          font-size: 36px;
        }
      }

      .bottom-box {
        width: 100%;
        height: 370px;
        padding: 0 40px;

        .cripple {
          width: 100%;
          height: 100%;
        }
      }
  }

  .chart4 {
    height: 260px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        width: 100%;
        height: 170px;
        padding: 0 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left{
          display: flex;
          img {
            width: 97px;
            height: 97px;
            margin-right: 28px;
          }

          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            .value {
              font-size: 36px;
            }
          }
        }

        .right {
          width: 129px;
          height: 50px;
          background: #4375E4;
          border-radius: 25px;
        }
      }
  }
}
</style>
